<template>
  <div style="padding: 20px">
    <el-button
      type="primary"
      @click="handleOptions('add')"
      class="add"
      icon="el-icon-plus
"
      >添加内容</el-button
    >
    <el-table :data="tableData" style="width: 100%" stripe v-loading="loading">
      <el-table-column label="ID" prop="id" align="center"> </el-table-column>

      <el-table-column label="能力名称" prop="bigTitle">
        <template slot-scope="scope">
          <div class="table-img-box">
            <el-image
              v-if="scope.row.indexPic"
              style="width: 100px; height: 100px; margin-right: 15px"
              :src="scope.row.indexPic"
              :preview-src-list="[scope.row.indexPic]"
            >
            </el-image>
            <div class="right">
              <div>{{ scope.row.bigTitle }}</div>
              <div>创建时间：{{ scope.row.createTime }}</div>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="所属分类" align="center"> </el-table-column>

      <el-table-column label="创建者" align="center"> </el-table-column>

      <el-table-column label="状态" prop="status" align="center">
        <template slot-scope="scope">
          <!-- <span class="status"></span> -->
          <span style="margin-left: 10px">{{
            scope.row.status == 0 ? "上架" : "下架"
          }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="300">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleOptions('look', scope.row)"
            >查看</el-button
          >
          <el-button
            v-if="scope.row.status == 1"
            size="mini"
            type="primary"
            @click="handleOptions('up', scope.row)"
            >上架</el-button
          >
          <el-button
            v-if="scope.row.status == 0"
            size="mini"
            type="primary"
            @click="handleOptions('out', scope.row)"
            >下架</el-button
          >
          <el-button
            size="mini"
            type="primary"
            @click="handleOptions('edit', scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="primary"
            @click="handleOptions('delete', scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-if="queryParams.total > 0"
      style="text-align: center; margin-top: 20px"
      background
      :page-size="queryParams.pageSize"
      :current-page="queryParams.currentPage"
      layout="prev, pager, next"
      :total="queryParams.total"
      @current-change="handleCurrentChange"
    >
    </el-pagination>

  <!-- 弹窗, 新增 / 修改 -->
  <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" ></add-or-update>    

  </div>
</template>

<script>
import {
  bigitalImageTextList,
  bigitalImageTextDelete,
  bigitalImageTextUpdate,
} from "@/api/upstage/index";
import AddOrUpdate from '../add'
export default {
  components: {
    AddOrUpdate
  },  
  data() {
    return {
      addOrUpdateVisible: false,
      loading: false,
      queryParams: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      tableData: [],
    };
  },
  props: {
    tableConfig: {
      type: Object,
      default: {},
    },
  },
  created() {},
  mounted() {
    this.getBigitalImageTextList();
  },
  methods: {
    /** 图文列表 */
    getBigitalImageTextList() {
      this.loading = true;
      bigitalImageTextList({
        ...this.queryParams,
        type: this.tableConfig.type,
        status: "0,1",
      })
      .then(({data}) => {
        this.tableData = data.data.records;
        this.queryParams.total = data.data.total;
      })
      .finally(() => {
        this.loading = false;
      });      
    },
    /** 操作 */
    handleOptions(type, rowData) {
      switch (type) {
        case "add":
          this.addOrUpdateHandle()

          // this.$router.push({
          //   path: "/upstage/add",
          //   query: {
          //     type: this.tableConfig.type,
          //   },
          // });
          break;
        case "look":
          this.$router.push({
            path: "/upstage/add",
            query: {
              id: rowData.id,
              type: this.tableConfig.type,
              option: "detail",
            },
          });
          break;
        case "up":
        case "out":
          this.$confirm(
            `此操作将${type === "up" ? "上架" : "下架"}该内容, 是否继续?`,
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          ).then(() => {
            bigitalImageTextUpdate({
              id: rowData.id,
              status: type === "up" ? "0" : "1",
            }).then((res) => {
              this.$message({
                type: "success",
                message: `${type === "up" ? "上架成功" : "下架成功"}`,
              });
              this.getBigitalImageTextList();
            });
          });
          break;
        case "edit":
          this.$router.push({
            path: "/upstage/add",
            query: {
              id: rowData.id,
              type: this.tableConfig.type,
            },
          });
          break;
        case "delete":
          this.$confirm("此操作将永久删除该内容, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            bigitalImageTextDelete({ id: rowData.id, status: "9" }).then(
              (res) => {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.getBigitalImageTextList();
              }
            );
          });
          break;
      }
    },

      // 新增 / 修改
      addOrUpdateHandle (id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },    

    /** 分页编辑 */
    handleCurrentChange(e) {
      this.queryParams.currentPage = e;
    },
  },
};
</script>

<style lang="scss" scoped>
.table-img-box {
  display: flex;
  align-items: center;
  .right {
    .tabs {
      font-size: 12px;
      border-radius: 5px;
      margin: 10px 0;
      display: inline-block;
      padding: 5px 8px;
      color: #fff;
      background: rgb(83, 83, 194);
    }
  }
}
.status {
  display: inline-block;
  border-radius: 4px;
  width: 8px;
  height: 8px;
  background: red;
}
.add {
  float: right;
  margin-bottom: 20px;
}
</style>
